<template>
    <div class="subfieldsr">
     
        <el-tabs class="eltabsa" v-model="activeName" ref="a" @tab-click="handleClick" >
            <el-tab-pane label="信息化应用入口"  name="first">
               <ul class="clearfix">
                <li class="color_a">
                    <div class="item">
                        <a href="https://i.caas.cn" class="img1" target="_blank">
                            <img src="https://ifst.caas.cn/cms/resource/web/xxhyyrk/rk1200/images/picimgs01.png" alt="">
                        </a>
                        <a href="https://i.caas.cn" class="title_s1" target="_blank">数字农科院系统</a>
                    </div>
                </li>
                <li class="color_a" style="background:#f7f7f7;">
                    <div class="item">
                        <a href="https://mail.caas.cn/" class="img1" target="_blank">
                            <img src="https://ifst.caas.cn/cms/resource/web/xxhyyrk/rk1200/images/picimgs02.png" alt="">
                        </a>
                        <a href="https://mail.caas.cn/" class="title_s1" target="_blank">电子邮箱系统</a>
                    </div>
                </li>
                <li class="color_a">
                    <div class="item">
                        <a href="https://eservice.caas.cn/xxhptywyfw/mhwzjq/index.htm" class="img1" target="_blank">
                            <img src="https://ifst.caas.cn/cms/resource/web/xxhyyrk/rk1200/images/picimgs03.png" alt="">
                        </a>
                        <a href="https://eservice.caas.cn/xxhptywyfw/mhwzjq/index.htm" class="title_s1" target="_blank">院所网站群</a>
                    </div>
                </li>
                <li class="color_a" style="background:#f7f7f7;">
                    <div class="item">
                        <a href="https://www.caas.cn/caasyhw/" target="_blank"a class="img1">
                            <img src="https://ifst.caas.cn/cms/resource/web/xxhyyrk/rk1200/images/picimgs04.png" alt="">
                        </a>
                        <a href="https://www.caas.cn/caasyhw/" target="_blank" class="title_s1">CAAS云会务</a>
                    </div>
                </li>
                <li class="color_a">
                    <div class="item">
                        <a href="https://www.caas.cn/caasysp/" class="img1" target="_blank">
                            <img src="https://ifst.caas.cn/cms/resource/web/xxhyyrk/rk1200/images/picimgs05.png" alt="" >
                        </a>
                        <a href="https://www.caas.cn/caasysp/" class="title_s1" target="_blank">CAAS云视频</a>
                    </div>
                </li>
            </ul>
            </el-tab-pane>
      </el-tabs>
    </div>
    </template>
    <script>
      export default {
        data() {
          return {
            activeName: 'first',
            activeNames: 'first'
          };
        },
        methods: {
          handleClick(tab, event) {
            console.log(tab, event);
          },
         
        },
      };
    </script>
    <style scoped>
    .clearfix{
        
        list-style: none;
    }
    .color_a{
        background: #f0f0f0;
        width: 20%;
        margin-bottom: 10px;
        float: left;
    }
    .item{
        padding: 10px 0 10px 0px;
        text-align: center;
    }
    .img1{
        list-style: none;
        text-decoration: none;
        top: 0;
        height: 44px;
        text-align: center;
        display: block;
        transition: all 200ms cubic-bezier(.02,.01,.47,1);
    }
    .img1:hover{
        transform: translate(0,-5px);
        transition-delay: 0s !important;
    }
    .img1 img{
        text-align: center;
    }
    
    .title_s1{
        color: #000;
        list-style: none;
        text-decoration: none;
        height: auto;
        line-height: 17px;
        padding: 4px 6px 0;
        font-size: 14px;
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp:2;
    }
   /deep/ .el-tabs__item {
      font-weight: bold; /*设置标签文本加粗*/
      font-size: 20px;
    }
    /deep/ .el-tabs__item:hover {
      font-weight: bold; /*设置标签文本加粗*/
      font-size: 20px;
       color: #000;
    }
    /deep/.el-tabs__item.is-active{
        color: #000;
    }
    /deep/.el-tabs__active-bar{
      background:#069564 ;
    }
    .subfieldsr{
      width: 1200px;
      margin: 0 auto;
    }
    .eltabsa{
        width: 100%;
    }
  </style>